<template>
  <div class="video-box" v-loading="loading">
    <video class="demo-video"  ref="player" muted autoplay @dblclick="fullScreen"></video>
  </div>
</template>
<script>
import flvjs from 'flv.js'

export default {
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // id: '1',
      player: null,
      lastDecodedFrames: 0,
      loading: false
    }
  },
  watch: {
    url: {
      handler() {
        if (this.player) {
          this.player.unload();
          this.player.destroy();
          this.player = null;
        }
        this.playVideo()
      },
      deep: true
    }
  },
  mounted() {
    if (this.player) {
      //this.player.stream.close();
      this.player.unload();
      this.player.destroy();
      this.player = null;
    }
    this.$nextTick(() => {
      this.playVideo()
      //延迟过大手动跳帧
     /* setInterval(() => {
        if (this.player.buffered.length) {
          let end = this.player.buffered.end(0);//获取当前buffered值
          let diff = end - this.player.currentTime;//获取buffered与currentTime的差值
          console.log('跳帧',diff)
          if (diff >= 0.5) {//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
            this.player.currentTime = this.player.buffered.end(0);//手动跳帧
          }
        }
      }, 2000); //2000毫秒执行一次*/
    })
  },
  beforeDestroy() {
    this.destroyFlv()
  },
  methods: {
    fullScreen() {
      if (this.$refs.player.requestFullScreen) {
        this.$refs.player.requestFullScreen()
      } else if (this.$refs.player.mozRequestFullScreen) {
        this.$refs.player.mozRequestFullScreen()
      } else if (this.$refs.player.webkitRequestFullScreen) {
        this.$refs.player.webkitRequestFullScreen()
      }
    },
    playVideo() {
      const time1 = new Date().getTime();
      if (flvjs.isSupported()) {
        let video = this.$refs.player;
        if (video) {
          this.loading = true;
          //创建播放器实例
          this.player = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            url: this.url
          },{
            enableStashBuffer: false,
            autoCleanupSourceBuffer: true,
            lazyLoad:false
          });
          this.player.attachMediaElement(video);
          try {
            this.player.load();
            this.player.play().then(() => {
              console.log("首屏打开用时", new Date().getTime() - time1);
              this.loading = false
            })
            this.listenVideo()
          } catch (error) {
            this.loading = false
            console.log("播放失败", error)
          }
        }
      }
    },
    // 监听视频流是否断流或者卡顿
    listenVideo() {
      const that = this;
      this.player.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
          console.log("视频播放出错，错误类型：", errorType,"错误详情：",errorDetail,"错误信息：",errorInfo);
          // 视频出错后销毁重建
          that.destroyFlv();
          that.playVideo();
        }
      );
      // 视频断流
      this.player.on("statistics_info", function (res) {
        if(that.lastDecodedFrames === 0){
          that.lastDecodedFrames = res.decodedFrames
          return
        }
        if(that.lastDecodedFrames != res.decodedFrames){
          that.lastDecodedFrames = res.decodedFrames
        }else{
          that.lastDecodedFrames = 0
          //that.destroyFlv()
          //that.playVideo()
        }
      });
    },
    //销毁
    destroyFlv() {
      if (this.player) {
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
        this.player = null;
      }
    },
  },

}
</script>
<style lang="scss">
.video-box {
  width: 100%;
  height: 100%;

  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .demo-video{
    background-color: #4b4b4b;
  }

  //播放按钮
  /*video::-webkit-media-controls-play-button {
    display: none;
  }
  video::-webkit-media-controls-current-time-display {
    display: none;
  }
  video::-webkit-media-controls-timeline {
    display: none;
  }*/
}
</style>
